<script setup lang="ts">
import { reactive } from 'vue';

import { PlusOutlined } from '@ant-design/icons-vue';

import addRole from './addRole.vue';
import SearchView from './searchView.vue';

import PageView from '/components/PageView/index.vue';

// 定义接口类型
interface NewData {
  type: 'add' | 'update'; // 限制 type 只能是 'add' 或 'edit'
  editinfo: any; // 根据实际情况替换 any 为具体类型，比如 YourEditInfoType
  open: boolean;
}

const newdata: NewData = reactive({
  open: false,
  type: 'add',
  editinfo: {},
});

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    align: 'center',
    key: 'name',
  },
  {
    title: '描述',

    dataIndex: 'desc',
    align: 'center',
    key: 'desc',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action',
  },
];
const data = [
  {
    id: 1,
    name: 'c端用户',
    desc: '描述',
  },

  {
    id: 1,
    name: 'b端用户',
    desc: '描述1',
  },
];

const openbtn = (e: any) => {
  newdata.type = 'add';
  newdata.editinfo = e;
  newdata.open = true;
};

const editbtn = (e: any) => {
  newdata.type = 'update';
  newdata.editinfo = e;
  newdata.open = true;
};
</script>
<template>
  <div class="p-5">
    <div class="card-box">
      <SearchView />
    </div>
    <div class="card-box box mt-5">
      <a-button type="primary" @click="openbtn(null)">
        <template #icon> <PlusOutlined /> </template>新增标签
      </a-button>
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" primary @click="editbtn(record)"
              >编辑</a-button
            >
            <a-button type="link" danger>删除</a-button>
          </template>
        </template>
      </a-table>
      <PageView />
    </div>
    <addRole
      v-model:value="newdata.open"
      :type="newdata.type"
      :editdata="newdata.editinfo"
    />
  </div>
</template>

<style scoped lang="less">
.box {
  min-height: 100px;
  // box-sizing: border-box;
  // padding: 20px;
}
</style>
